<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置管理 - DevOps平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.44.0/min/vs/loader.js"></script>
    <style>
        .config-card {
            transition: all 0.3s ease;
        }
        .config-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .env-badge {
            animation: pulse 2s infinite;
        }
        .config-tree {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        .json-key {
            color: #0066cc;
        }
        .json-string {
            color: #009900;
        }
        .json-number {
            color: #cc6600;
        }
        .json-boolean {
            color: #cc0066;
        }
        .diff-added {
            background-color: rgba(34, 197, 94, 0.1);
            border-left: 3px solid rgb(34, 197, 94);
        }
        .diff-removed {
            background-color: rgba(239, 68, 68, 0.1);
            border-left: 3px solid rgb(239, 68, 68);
        }
        .diff-modified {
            background-color: rgba(251, 191, 36, 0.1);
            border-left: 3px solid rgb(251, 191, 36);
        }
    </style>
</head>
<body class="bg-base-100">
    <div id="config">
        <!-- 导航栏 -->
        <div class="navbar bg-base-100 shadow-lg">
            <div class="navbar-start">
                <a href="index.html" class="btn btn-ghost text-xl">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回主页
                </a>
            </div>
            <div class="navbar-center">
                <h1 class="text-2xl font-bold">配置管理中心</h1>
            </div>
            <div class="navbar-end">
                <div class="dropdown dropdown-end">
                    <div tabindex="0" role="button" class="btn btn-ghost">
                        <i class="fas fa-cog text-xl"></i>
                    </div>
                    <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="showGlobalSettings = true"><i class="fas fa-globe mr-2"></i>全局设置</a></li>
                        <li><a @click="showBackupRestore = true"><i class="fas fa-database mr-2"></i>备份恢复</a></li>
                        <li><a @click="exportConfigs"><i class="fas fa-download mr-2"></i>导出配置</a></li>
                        <li><a @click="showImportConfig = true"><i class="fas fa-upload mr-2"></i>导入配置</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 主要内容 -->
        <div class="container mx-auto px-4 py-8">
            <!-- 环境选择器 -->
            <div class="flex justify-between items-center mb-8">
                <div class="tabs tabs-boxed">
                    <a v-for="env in environments" :key="env.id" 
                       class="tab" :class="{'tab-active': currentEnv === env.id}"
                       @click="currentEnv = env.id">
                        <i :class="env.icon" class="mr-2"></i>
                        {{ env.name }}
                        <div v-if="env.hasChanges" class="badge badge-warning badge-xs ml-2 env-badge"></div>
                    </a>
                </div>
                <div class="flex space-x-2">
                    <button class="btn btn-outline btn-sm" @click="compareConfigs">
                        <i class="fas fa-code-compare mr-2"></i>
                        配置对比
                    </button>
                    <button class="btn btn-primary btn-sm" @click="showNewConfig = true">
                        <i class="fas fa-plus mr-2"></i>
                        新增配置
                    </button>
                </div>
            </div>

            <!-- 配置分类 -->
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
                <div v-for="category in configCategories" :key="category.id"
                     class="config-card card bg-base-100 shadow-xl cursor-pointer"
                     @click="selectedCategory = category.id">
                    <div class="card-body text-center">
                        <div class="text-4xl mb-4" :class="category.color">
                            <i :class="category.icon"></i>
                        </div>
                        <h2 class="card-title justify-center">{{ category.name }}</h2>
                        <p class="text-sm text-base-content/70">{{ category.description }}</p>
                        <div class="badge badge-outline">{{ category.count }} 项配置</div>
                    </div>
                </div>
            </div>

            <!-- 配置列表 -->
            <div class="card bg-base-100 shadow-xl mb-8">
                <div class="card-body">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="card-title text-2xl">
                            <i class="fas fa-list text-primary mr-2"></i>
                            {{ getCurrentCategoryName() }} 配置
                        </h2>
                        <div class="flex space-x-2">
                            <div class="form-control">
                                <input type="text" placeholder="搜索配置..." 
                                       class="input input-bordered input-sm" v-model="searchQuery">
                            </div>
                            <button class="btn btn-sm btn-outline" @click="refreshConfigs">
                                <i class="fas fa-sync-alt mr-2"></i>
                                刷新
                            </button>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="table table-zebra">
                            <thead>
                                <tr>
                                    <th>配置名称</th>
                                    <th>类型</th>
                                    <th>环境</th>
                                    <th>最后修改</th>
                                    <th>修改人</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="config in filteredConfigs" :key="config.id">
                                    <td>
                                        <div class="flex items-center space-x-3">
                                            <i :class="getConfigIcon(config.type)" class="text-lg"></i>
                                            <div>
                                                <div class="font-bold">{{ config.name }}</div>
                                                <div class="text-sm text-base-content/70">{{ config.key }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="badge badge-outline">{{ config.type }}</div>
                                    </td>
                                    <td>
                                        <div class="badge" :class="getEnvBadgeClass(config.environment)">
                                            {{ config.environment }}
                                        </div>
                                    </td>
                                    <td>{{ config.lastModified }}</td>
                                    <td>
                                        <div class="flex items-center space-x-2">
                                            <img :src="config.modifiedBy.avatar" :alt="config.modifiedBy.name" 
                                                 class="w-6 h-6 rounded-full">
                                            <span>{{ config.modifiedBy.name }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="badge" :class="getStatusBadgeClass(config.status)">
                                            {{ config.status }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="flex space-x-1">
                                            <button class="btn btn-xs btn-outline" @click="editConfig(config)">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-xs btn-outline" @click="viewHistory(config)">
                                                <i class="fas fa-history"></i>
                                            </button>
                                            <button class="btn btn-xs btn-outline" @click="duplicateConfig(config)">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                            <button class="btn btn-xs btn-error" @click="deleteConfig(config)">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 配置统计 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 配置分布 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-chart-pie text-info mr-2"></i>
                            配置分布
                        </h2>
                        <div class="space-y-3">
                            <div v-for="category in configCategories" :key="category.id" 
                                 class="flex justify-between items-center">
                                <div class="flex items-center space-x-2">
                                    <i :class="category.icon" :class="category.color"></i>
                                    <span>{{ category.name }}</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-20 bg-base-300 rounded-full h-2">
                                        <div class="bg-primary h-2 rounded-full" 
                                             :style="{width: (category.count / totalConfigs * 100) + '%'}"></div>
                                    </div>
                                    <span class="text-sm">{{ category.count }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近修改 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-clock text-warning mr-2"></i>
                            最近修改
                        </h2>
                        <div class="space-y-3">
                            <div v-for="change in recentChanges" :key="change.id" 
                                 class="flex items-center space-x-3 p-2 rounded-lg bg-base-200">
                                <img :src="change.user.avatar" :alt="change.user.name" 
                                     class="w-8 h-8 rounded-full">
                                <div class="flex-1">
                                    <div class="font-semibold text-sm">{{ change.config }}</div>
                                    <div class="text-xs text-base-content/70">{{ change.action }} · {{ change.time }}</div>
                                </div>
                                <div class="badge badge-xs" :class="getActionBadgeClass(change.action)">
                                    {{ change.action }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 环境状态 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-server text-success mr-2"></i>
                            环境状态
                        </h2>
                        <div class="space-y-3">
                            <div v-for="env in environments" :key="env.id" 
                                 class="flex justify-between items-center p-2 rounded-lg bg-base-200">
                                <div class="flex items-center space-x-2">
                                    <i :class="env.icon" class="text-lg"></i>
                                    <span>{{ env.name }}</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="badge badge-xs" :class="getEnvStatusClass(env.status)">
                                        {{ env.status }}
                                    </div>
                                    <div v-if="env.hasChanges" class="badge badge-warning badge-xs">
                                        待同步
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增配置模态框 -->
        <div v-if="showNewConfig" class="modal modal-open">
            <div class="modal-box w-11/12 max-w-3xl">
                <h3 class="font-bold text-lg mb-4">
                    <i class="fas fa-plus-circle text-primary mr-2"></i>
                    新增配置项
                </h3>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">配置名称</span>
                            </label>
                            <input type="text" class="input input-bordered" v-model="newConfig.name" 
                                   placeholder="例如: 数据库连接配置">
                        </div>

                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">配置键</span>
                            </label>
                            <input type="text" class="input input-bordered" v-model="newConfig.key" 
                                   placeholder="例如: database.connection.url">
                        </div>

                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">配置类型</span>
                            </label>
                            <select class="select select-bordered" v-model="newConfig.type">
                                <option value="">选择类型</option>
                                <option value="string">字符串</option>
                                <option value="number">数字</option>
                                <option value="boolean">布尔值</option>
                                <option value="json">JSON对象</option>
                                <option value="yaml">YAML配置</option>
                                <option value="properties">Properties文件</option>
                            </select>
                        </div>

                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">应用环境</span>
                            </label>
                            <div class="flex flex-wrap gap-2">
                                <label v-for="env in environments" :key="env.id" class="cursor-pointer label">
                                    <input type="checkbox" class="checkbox checkbox-sm" 
                                           :value="env.id" v-model="newConfig.environments">
                                    <span class="label-text ml-2">{{ env.name }}</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">配置分类</span>
                            </label>
                            <select class="select select-bordered" v-model="newConfig.category">
                                <option value="">选择分类</option>
                                <option v-for="category in configCategories" :key="category.id" :value="category.id">
                                    {{ category.name }}
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">配置值</span>
                            </label>
                            <textarea class="textarea textarea-bordered h-32" v-model="newConfig.value" 
                                      placeholder="请输入配置值..."></textarea>
                        </div>

                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">描述说明</span>
                            </label>
                            <textarea class="textarea textarea-bordered" v-model="newConfig.description" 
                                      placeholder="请输入配置说明..."></textarea>
                        </div>

                        <div class="form-control">
                            <label class="cursor-pointer label">
                                <span class="label-text">敏感配置</span>
                                <input type="checkbox" class="checkbox checkbox-primary" v-model="newConfig.sensitive">
                            </label>
                        </div>

                        <div class="form-control">
                            <label class="cursor-pointer label">
                                <span class="label-text">需要重启应用</span>
                                <input type="checkbox" class="checkbox checkbox-primary" v-model="newConfig.requireRestart">
                            </label>
                        </div>
                    </div>
                </div>

                <div class="modal-action">
                    <button class="btn btn-ghost" @click="showNewConfig = false">取消</button>
                    <button class="btn btn-primary" @click="createConfig">
                        <i class="fas fa-save mr-2"></i>
                        保存配置
                    </button>
                </div>
            </div>
        </div>

        <!-- 配置编辑模态框 -->
        <div v-if="showEditConfig" class="modal modal-open">
            <div class="modal-box w-11/12 max-w-4xl">
                <h3 class="font-bold text-lg mb-4">
                    <i class="fas fa-edit text-info mr-2"></i>
                    编辑配置 - {{ editingConfig.name }}
                </h3>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 配置信息 -->
                    <div class="space-y-4">
                        <div class="bg-base-200 p-4 rounded-lg">
                            <h4 class="font-semibold mb-2">基本信息</h4>
                            <div class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <span>配置键:</span>
                                    <span class="font-mono">{{ editingConfig.key }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>类型:</span>
                                    <span>{{ editingConfig.type }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>环境:</span>
                                    <span>{{ editingConfig.environment }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>最后修改:</span>
                                    <span>{{ editingConfig.lastModified }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">配置值</span>
                            </label>
                            <textarea class="textarea textarea-bordered h-40 font-mono text-sm" 
                                      v-model="editingConfig.value"></textarea>
                        </div>

                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">修改说明</span>
                            </label>
                            <textarea class="textarea textarea-bordered" v-model="editingConfig.changeNote" 
                                      placeholder="请说明本次修改的原因..."></textarea>
                        </div>
                    </div>

                    <!-- 配置预览 -->
                    <div class="space-y-4">
                        <div class="bg-base-200 p-4 rounded-lg">
                            <h4 class="font-semibold mb-2">配置预览</h4>
                            <div class="config-tree bg-base-100 p-3 rounded border text-sm font-mono">
                                <pre>{{ formatConfigValue(editingConfig.value, editingConfig.type) }}</pre>
                            </div>
                        </div>

                        <div class="bg-base-200 p-4 rounded-lg">
                            <h4 class="font-semibold mb-2">影响范围</h4>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-server text-info"></i>
                                    <span class="text-sm">影响服务: {{ editingConfig.affectedServices || '用户服务, 订单服务' }}</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-exclamation-triangle text-warning"></i>
                                    <span class="text-sm">需要重启: {{ editingConfig.requireRestart ? '是' : '否' }}</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-shield-alt text-success"></i>
                                    <span class="text-sm">敏感配置: {{ editingConfig.sensitive ? '是' : '否' }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-base-200 p-4 rounded-lg">
                            <h4 class="font-semibold mb-2">验证结果</h4>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-check-circle text-success"></i>
                                    <span class="text-sm">语法检查通过</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-check-circle text-success"></i>
                                    <span class="text-sm">格式验证通过</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-check-circle text-success"></i>
                                    <span class="text-sm">依赖检查通过</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-action">
                    <button class="btn btn-ghost" @click="showEditConfig = false">取消</button>
                    <button class="btn btn-outline" @click="validateConfig">
                        <i class="fas fa-check mr-2"></i>
                        验证配置
                    </button>
                    <button class="btn btn-primary" @click="saveConfig">
                        <i class="fas fa-save mr-2"></i>
                        保存修改
                    </button>
                </div>
            </div>
        </div>

        <!-- 配置对比模态框 -->
        <div v-if="showConfigCompare" class="modal modal-open">
            <div class="modal-box w-11/12 max-w-6xl">
                <h3 class="font-bold text-lg mb-4">
                    <i class="fas fa-code-compare text-warning mr-2"></i>
                    配置对比
                </h3>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 环境选择 -->
                    <div class="space-y-4">
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">源环境</span>
                            </label>
                            <select class="select select-bordered" v-model="compareSource">
                                <option v-for="env in environments" :key="env.id" :value="env.id">
                                    {{ env.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">目标环境</span>
                            </label>
                            <select class="select select-bordered" v-model="compareTarget">
                                <option v-for="env in environments" :key="env.id" :value="env.id">
                                    {{ env.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 对比结果 -->
                <div v-if="compareSource && compareTarget" class="mt-6">
                    <h4 class="font-semibold mb-4">对比结果</h4>
                    <div class="space-y-3">
                        <div v-for="diff in configDiffs" :key="diff.key" 
                             class="p-3 rounded-lg" :class="getDiffClass(diff.type)">
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-semibold">{{ diff.key }}</span>
                                <div class="badge badge-sm" :class="getDiffBadgeClass(diff.type)">
                                    {{ getDiffTypeText(diff.type) }}
                                </div>
                            </div>
                            <div v-if="diff.type === 'modified'" class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <div class="text-base-content/70 mb-1">{{ getEnvName(compareSource) }}:</div>
                                    <div class="bg-base-100 p-2 rounded font-mono">{{ diff.sourceValue }}</div>
                                </div>
                                <div>
                                    <div class="text-base-content/70 mb-1">{{ getEnvName(compareTarget) }}:</div>
                                    <div class="bg-base-100 p-2 rounded font-mono">{{ diff.targetValue }}</div>
                                </div>
                            </div>
                            <div v-else class="text-sm font-mono bg-base-100 p-2 rounded">
                                {{ diff.value }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-action">
                    <button class="btn btn-ghost" @click="showConfigCompare = false">关闭</button>
                    <button class="btn btn-primary" @click="syncConfigs" 
                            :disabled="!compareSource || !compareTarget">
                        <i class="fas fa-sync mr-2"></i>
                        同步配置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    currentEnv: 'production',
                    selectedCategory: 'database',
                    searchQuery: '',
                    showNewConfig: false,
                    showEditConfig: false,
                    showConfigCompare: false,
                    showGlobalSettings: false,
                    showBackupRestore: false,
                    showImportConfig: false,
                    compareSource: '',
                    compareTarget: '',
                    editingConfig: {},
                    newConfig: {
                        name: '',
                        key: '',
                        type: '',
                        value: '',
                        description: '',
                        category: '',
                        environments: [],
                        sensitive: false,
                        requireRestart: false
                    },
                    environments: [
                        { id: 'development', name: '开发环境', icon: 'fas fa-code', status: '正常', hasChanges: false },
                        { id: 'testing', name: '测试环境', icon: 'fas fa-vial', status: '正常', hasChanges: true },
                        { id: 'staging', name: '预发布环境', icon: 'fas fa-staging', status: '正常', hasChanges: false },
                        { id: 'production', name: '生产环境', icon: 'fas fa-server', status: '正常', hasChanges: true }
                    ],
                    configCategories: [
                        { id: 'database', name: '数据库配置', description: '数据库连接和配置', icon: 'fas fa-database', color: 'text-blue-500', count: 12 },
                        { id: 'cache', name: '缓存配置', description: 'Redis和缓存设置', icon: 'fas fa-memory', color: 'text-red-500', count: 8 },
                        { id: 'security', name: '安全配置', description: '认证和授权设置', icon: 'fas fa-shield-alt', color: 'text-green-500', count: 15 },
                        { id: 'monitoring', name: '监控配置', description: '监控和日志设置', icon: 'fas fa-chart-line', color: 'text-purple-500', count: 6 }
                    ],
                    configs: [
                        {
                            id: 'config-001',
                            name: '数据库连接池',
                            key: 'database.pool.maxSize',
                            type: 'number',
                            value: '20',
                            environment: '生产环境',
                            category: 'database',
                            lastModified: '2024-01-15 14:30',
                            modifiedBy: { name: '张三', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhang' },
                            status: '已生效',
                            sensitive: false,
                            requireRestart: true
                        },
                        {
                            id: 'config-002',
                            name: 'Redis连接配置',
                            key: 'redis.connection.host',
                            type: 'string',
                            value: 'redis.example.com:6379',
                            environment: '生产环境',
                            category: 'cache',
                            lastModified: '2024-01-14 16:45',
                            modifiedBy: { name: '李四', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=li' },
                            status: '已生效',
                            sensitive: true,
                            requireRestart: false
                        },
                        {
                            id: 'config-003',
                            name: 'JWT密钥配置',
                            key: 'security.jwt.secret',
                            type: 'string',
                            value: '***********',
                            environment: '生产环境',
                            category: 'security',
                            lastModified: '2024-01-13 10:20',
                            modifiedBy: { name: '王五', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wang' },
                            status: '待生效',
                            sensitive: true,
                            requireRestart: true
                        },
                        {
                            id: 'config-004',
                            name: '日志级别配置',
                            key: 'logging.level.root',
                            type: 'string',
                            value: 'INFO',
                            environment: '生产环境',
                            category: 'monitoring',
                            lastModified: '2024-01-12 09:15',
                            modifiedBy: { name: '赵六', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhao' },
                            status: '已生效',
                            sensitive: false,
                            requireRestart: false
                        }
                    ],
                    recentChanges: [
                        {
                            id: 'change-001',
                            config: '数据库连接池',
                            action: '修改',
                            time: '2小时前',
                            user: { name: '张三', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhang' }
                        },
                        {
                            id: 'change-002',
                            config: 'Redis连接配置',
                            action: '新增',
                            time: '4小时前',
                            user: { name: '李四', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=li' }
                        },
                        {
                            id: 'change-003',
                            config: 'JWT密钥配置',
                            action: '删除',
                            time: '1天前',
                            user: { name: '王五', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wang' }
                        }
                    ],
                    configDiffs: [
                        {
                            key: 'database.pool.maxSize',
                            type: 'modified',
                            sourceValue: '20',
                            targetValue: '30'
                        },
                        {
                            key: 'redis.timeout',
                            type: 'added',
                            value: '5000'
                        },
                        {
                            key: 'old.config.key',
                            type: 'removed',
                            value: 'deprecated_value'
                        }
                    ]
                }
            },
            computed: {
                filteredConfigs() {
                    let filtered = this.configs.filter(config => 
                        config.category === this.selectedCategory
                    );
                    
                    if (this.searchQuery) {
                        filtered = filtered.filter(config => 
                            config.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
                            config.key.toLowerCase().includes(this.searchQuery.toLowerCase())
                        );
                    }
                    
                    return filtered;
                },
                totalConfigs() {
                    return this.configCategories.reduce((sum, category) => sum + category.count, 0);
                }
            },
            methods: {
                getCurrentCategoryName() {
                    const category = this.configCategories.find(c => c.id === this.selectedCategory);
                    return category ? category.name : '配置';
                },
                getConfigIcon(type) {
                    const icons = {
                        'string': 'fas fa-quote-right text-blue-500',
                        'number': 'fas fa-hashtag text-green-500',
                        'boolean': 'fas fa-toggle-on text-purple-500',
                        'json': 'fas fa-code text-orange-500',
                        'yaml': 'fas fa-file-code text-red-500',
                        'properties': 'fas fa-file-alt text-gray-500'
                    };
                    return icons[type] || 'fas fa-cog';
                },
                getEnvBadgeClass(environment) {
                    const classes = {
                        '开发环境': 'badge-info',
                        '测试环境': 'badge-warning',
                        '预发布环境': 'badge-secondary',
                        '生产环境': 'badge-success'
                    };
                    return classes[environment] || 'badge-ghost';
                },
                getStatusBadgeClass(status) {
                    const classes = {
                        '已生效': 'badge-success',
                        '待生效': 'badge-warning',
                        '已失效': 'badge-error'
                    };
                    return classes[status] || 'badge-ghost';
                },
                getEnvStatusClass(status) {
                    const classes = {
                        '正常': 'badge-success',
                        '异常': 'badge-error',
                        '维护中': 'badge-warning'
                    };
                    return classes[status] || 'badge-ghost';
                },
                getActionBadgeClass(action) {
                    const classes = {
                        '修改': 'badge-warning',
                        '新增': 'badge-success',
                        '删除': 'badge-error'
                    };
                    return classes[action] || 'badge-ghost';
                },
                getDiffClass(type) {
                    const classes = {
                        'added': 'diff-added',
                        'removed': 'diff-removed',
                        'modified': 'diff-modified'
                    };
                    return classes[type] || '';
                },
                getDiffBadgeClass(type) {
                    const classes = {
                        'added': 'badge-success',
                        'removed': 'badge-error',
                        'modified': 'badge-warning'
                    };
                    return classes[type] || 'badge-ghost';
                },
                getDiffTypeText(type) {
                    const texts = {
                        'added': '新增',
                        'removed': '删除',
                        'modified': '修改'
                    };
                    return texts[type] || '未知';
                },
                getEnvName(envId) {
                    const env = this.environments.find(e => e.id === envId);
                    return env ? env.name : envId;
                },
                formatConfigValue(value, type) {
                    try {
                        if (type === 'json') {
                            return JSON.stringify(JSON.parse(value), null, 2);
                        }
                        return value;
                    } catch (e) {
                        return value;
                    }
                },
                createConfig() {
                    if (!this.newConfig.name || !this.newConfig.key || !this.newConfig.type) {
                        alert('请填写必要信息');
                        return;
                    }
                    
                    const config = {
                        id: 'config-' + Date.now(),
                        name: this.newConfig.name,
                        key: this.newConfig.key,
                        type: this.newConfig.type,
                        value: this.newConfig.value,
                        environment: '生产环境',
                        category: this.newConfig.category,
                        lastModified: new Date().toLocaleString(),
                        modifiedBy: { name: '当前用户', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=current' },
                        status: '待生效',
                        sensitive: this.newConfig.sensitive,
                        requireRestart: this.newConfig.requireRestart
                    };
                    
                    this.configs.unshift(config);
                    this.showNewConfig = false;
                    this.newConfig = {
                        name: '',
                        key: '',
                        type: '',
                        value: '',
                        description: '',
                        category: '',
                        environments: [],
                        sensitive: false,
                        requireRestart: false
                    };
                    
                    alert('配置创建成功！');
                },
                editConfig(config) {
                    this.editingConfig = { ...config, changeNote: '' };
                    this.showEditConfig = true;
                },
                saveConfig() {
                    const index = this.configs.findIndex(c => c.id === this.editingConfig.id);
                    if (index !== -1) {
                        this.configs[index] = { ...this.editingConfig };
                        this.configs[index].lastModified = new Date().toLocaleString();
                        this.configs[index].status = '待生效';
                    }
                    this.showEditConfig = false;
                    alert('配置保存成功！');
                },
                validateConfig() {
                    alert('配置验证通过！');
                },
                viewHistory(config) {
                    alert(`查看配置历史: ${config.name}`);
                },
                duplicateConfig(config) {
                    const newConfig = {
                        ...config,
                        id: 'config-' + Date.now(),
                        name: config.name + ' (副本)',
                        key: config.key + '.copy',
                        status: '待生效'
                    };
                    this.configs.unshift(newConfig);
                    alert('配置复制成功！');
                },
                deleteConfig(config) {
                    if (confirm(`确定要删除配置 "${config.name}" 吗？`)) {
                        const index = this.configs.findIndex(c => c.id === config.id);
                        if (index !== -1) {
                            this.configs.splice(index, 1);
                            alert('配置删除成功！');
                        }
                    }
                },
                compareConfigs() {
                    this.showConfigCompare = true;
                },
                syncConfigs() {
                    if (confirm('确定要同步配置吗？这将覆盖目标环境的配置。')) {
                        alert('配置同步成功！');
                        this.showConfigCompare = false;
                    }
                },
                refreshConfigs() {
                    alert('配置列表已刷新！');
                },
                exportConfigs() {
                    const data = JSON.stringify(this.configs, null, 2);
                    const blob = new Blob([data], { type: 'application/json' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'configs.json';
                    a.click();
                    URL.revokeObjectURL(url);
                }
            }
        }).mount('#config');
    </script>
</body>
</html>